<template>

  <tree @query="doQuery" gatewayType="-1"></tree>

  <div class="rightContent">
    <div class="page-header">
      <!-- <query :columns="columns" @query="doQuery"></query> -->
    </div>
    <div class="flex-col-table">
      <div class="btn-row">
        <!-- <el-button type="primary" @click="add">导出</el-button> -->
      </div>
      <el-table :empty-text="i18n.fy.nodata" :data="data.tableData" :style="{ width: getWidth(), height: getHeight() }"
        border v-loading="data.loading" :element-loading-text="i18n.fy.loading">
        <!-- <el-table-column prop="id" label="ID" width="80" align="center"/>
    <el-table-column prop="userId" :label="locale=='zh'?'用户编号':'userId'" width="110" align="center" />
    <el-table-column prop="userName" :label="locale=='zh'?'用户名':'userName'"  width="190" align="center"  >
    </el-table-column> -->
        <el-table-column prop="gatewayId" :label="locale == 'zh' ? 'gatewayId' : 'gatewayId'" align="center"
          width="220" />
        <el-table-column prop="imei" :label="locale == 'zh' ? 'imei' : 'imei'" align="center" />
        <el-table-column prop="totalPowerConsumption" :label="locale == 'zh' ? '运行电量' : 'operationValues'" width="220"
          :show-overflow-tooltip='true' />
        <el-table-column prop="updatedAt" :label="locale == 'zh' ? '操作时间' : 'createTime'" width="220">
          <template #default="scope">
            {{ scope.row.updatedAt.replace("T", ' ') }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="createTime" label="上报时间"  width="180" />
    <el-table-column prop="updateTime" label="处理时间"  width="180"  /> -->
        <!-- <el-table-column label="操作" width="320">
      <template #default="scope">
        <el-button  type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
        <el-button  type="warning" size="small" @click="del(scope.row)">获取设备拓扑</el-button>
        <el-button  type="danger" size="small" @click="del(scope.row)">设备重启</el-button>
      </template>
    </el-table-column> -->
      </el-table>

      <el-pagination @size-change="onChanSize" @current-change="onChanPage" v-model:current-page="data.queryForm.page"
        v-model:page-size="data.queryForm.limit" :total="data.total" />
    </div>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
import query from '../../components/query.vue'
import tree from '../../components/tree.vue'
const { appContext: { config: { globalProperties } } } = getCurrentInstance()
let $httpUrl = globalProperties.$httpUrl;
// let store = useMainStore()
// store.getMenu()
let columns = reactive(
  {
    'userName': {
      'label': locale.value == 'zh' ? '用户名' : 'userName',//列名称
      'queryValue': ''
    },
    'operation': {
      'label': locale.value == 'zh' ? '操作事项' : 'operation',//列名称
      'queryValue': ''
    },
    'createTime': {
      'type': 'date',
      'label': locale.value == 'zh' ? '时间' : 'createTime',//列名称
      'queryValue': ''
    },
  }
)


//?page=1&limit=30
let data = reactive({
  queryForm: {
    page: 1,
    limit: 100
  },
  tableData: [

  ],
  total: 0,
  dialog: false,
  form: {},
  rules: {
    name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
    role: [{ required: true, message: '请选择岗位', trigger: 'change' }]
  }
})


const reQueryForm = () => { // 重置查询表单
  data.queryForm = {
    page: 1,
    limit: 100
  }
}


const currentChange = (page) => {
  // 
  pageData.queryForm.page = page
  getList()
}

const sizeChange = (size) => {
  data.queryForm.page = size
  getList()
}

const add = () => {  // 新增

}

const edit = (row) => { // 编辑

}
const onChanSize = (e) => {
  //修改分页数
  // 
  data.queryForm.page = 1;
  data.queryForm.limit = e;
  getList();
}
const onChanPage = (e) => {
  //修改分页
  // 
  data.queryForm.page = e;
  getList();
}

const del = (row) => { // 删除
  ElMessageBox.confirm('确认删除?', '提示').then(() => {
    // $axios.post() / $axios.get() 

  })
}

let formRef = ref(null)

const submit = () => { // 提交新增/编辑表单
  formRef.value.validate(valid => {
    if (valid) {

    }
  })
}

const getList = (params) => { // 获取表格数据
  data.loading = true;
  $axios.post('/AEP/electricMeters', {
    // ...data.queryForm,
    // ...params,
    // deviceFid:deviceFid.value
  }).then(res => {
    data.loading = false;
    data.tableData = res.data.data
    //data.total = res.data.data.total
  })
  data.loading = false;
}
let deviceFid = ref();
const doQuery = (params) => {
  if (params.deviceFid) {
    deviceFid.value = params.deviceFid;
  }
  getList({ ...params, deviceFid: deviceFid.value });
}
const getWidth = () => {
  return (window.innerWidth - 398) + 'px';
}
const getHeight = () => {
  return (window.innerHeight - 150) + 'px';
}
const showType = (type) => {
  if (type == -1) return "系统";
  if (type == 0) return "云平台";
  if (type == 1) return "云产品";
  if (type == 2) return "云设备";
}
onBeforeMount(() => {
  getList({})
})
</script>

<style lang="scss" scoped>
.available1 {
  color: orangered;
}
</style>